<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环精灵图</title>

    <style>
        ul>li {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 15px;
            background-color: antiquewhite;
            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
    </style>


</head>

<body>

    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


</body>

<script>
    var li = document.querySelectorAll('li');

    for (var i = 0; i < li.length; i++) {
        var index = 44 * i;
        li[i].style.backgroundPosition = '0px  ' + -index + 'px';
    }
</script>

</html>